<div class="pb-2 px-3">
  <div class="flex justify-between items-center h-8">
    <div class="flex items-center space-x-1 shrink-0">
      <div class="flex items-center justify-center w-6 h-6">
        <svg
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
          class="w-4 h-4 text-primary-500"
        >
          <path
            d="M17 8V2H20C20.5523 2 21 2.44772 21 3V7C21 7.55228 20.5523 8 20 8H17ZM15 22C15 22.5523 14.5523 23 14 23H10C9.44772 23 9 22.5523 9 22V8H2.5V6.07437C2.5 5.7187 2.68891 5.3898 2.99613 5.21059L8.5 2H15V22Z"
          ></path>
        </svg>
      </div>
      <div class="text-sm font-semibold text-gray-800">
        <div class="flex items-center">
          <div class="mr-1">{{ 'PAC.Xpert.Tools' | translate: {Default: 'Tools'} }}</div>
          <div class="p-[1px] w-4 h-4 shrink-0"
            [matTooltip]="'PAC.Xpert.ToolsetTooltip' | translate: {Default: 'Using tools can extend the capabilities of LLM, such as searching the internet or performing scientific calculations'}"
            matTooltipPosition="above"
            >
            <svg
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              fill="currentColor"
              class="text-text-quaternary hover:text-text-tertiary w-full h-full"
            >
              <path
                d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM13 13.3551V14H11V12.5C11 11.9477 11.4477 11.5 12 11.5C12.8284 11.5 13.5 10.8284 13.5 10C13.5 9.17157 12.8284 8.5 12 8.5C11.2723 8.5 10.6656 9.01823 10.5288 9.70577L8.56731 9.31346C8.88637 7.70919 10.302 6.5 12 6.5C13.933 6.5 15.5 8.067 15.5 10C15.5 11.5855 14.4457 12.9248 13 13.3551Z"
              ></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
    <div class="flex gap-2 items-center">
      <div>
        <!-- <div class="flex items-center">
          <div class="leading-[18px] text-xs font-normal text-gray-500">3/3&nbsp;Enabled</div>
          <div class="ml-3 mr-1 h-3.5 w-px bg-gray-200"></div>
          <div
            class="flex items-center rounded-md h-7 px-3 space-x-1 text-gray-700 cursor-pointer hover:bg-gray-200 select-none"
          >
            <div>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
                class="w-3.5 h-3.5"
              >
                <path
                  d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
                ></path>
              </svg>
            </div>
            <div class="text-xs font-medium">{{ 'PAC.ACTIONS.Add' | translate: {Default: 'Add'} }}</div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</div>

<div class="mt-1 px-3">
  <div class="grid gap-1 grid-cols-1 2xl:grid-cols-2 items-center flex-wrap justify-between">
    @for (toolset of toolsets(); track toolset.key) {
      <div class="bg-white shadow-xs group relative flex justify-between items-center last-of-type:mb-0 pl-2.5 py-2 pr-3 w-full rounded-lg border-[0.5px] border-gray-200">
        <div class="grow w-0 flex items-center">
            <emoji-avatar [avatar]="toolset.entity.avatar" small class="rounded-lg overflow-hidden shadow-sm" />
            <div class="grow w-0 ml-2 text-[13px] font-medium text-gray-800 truncate">
                <span class="text-gray-800 pr-2">{{toolset.entity.name}}</span>
                <span class="text-gray-500">{{toolset.entity.description}}</span>
            </div>
        </div>
        <div class="shrink-0 ml-1 flex items-center">
          <div class="hidden group-hover:flex items-center">
            <!-- <div class="p-1 rounded-md hover:bg-black/5 cursor-pointer">
                <svg
                width="12"
                height="12"
                viewBox="0 0 12 12"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                class="w-4 h-4 text-gray-500"
                >
                <g id="info-circle" clip-path="url(#clip0_7880_62014)">
                    <path
                    id="Icon"
                    d="M6 8V6M6 4H6.005M11 6C11 8.76142 8.76142 11 6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6Z"
                    stroke="currentColor"
                    stroke-width="1.25"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    ></path>
                </g>
                <defs>
                    <clipPath id="clip0_7880_62014"><rect width="12" height="12" fill="white"></rect></clipPath>
                </defs>
                </svg>
            </div> -->

            <div class="ml-2 mr-3 w-px h-3.5 bg-gray-200"></div>

            <div class="p-1 rounded-md hover:bg-black/5 cursor-pointer"
              (click)="remove(toolset)">
              <svg
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                fill="currentColor"
                class="remixicon w-4 h-4 text-gray-500"
                >
                <path
                    d="M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 11H11V17H9V11ZM13 11H15V17H13V11ZM9 4V6H15V4H9Z"
                ></path>
              </svg>
            </div>
            
          </div>
        </div>
      </div>
    }
  </div>
</div>
